<template>
  <div style="min-height: 500px; padding: 0 30px;">
    <h2>系统设置</h2>
    <div class="grayBoundTop20">

      <el-row>
        <el-col :span="12" align="center">
          <span>允许登陆</span>
        </el-col>
        <el-col :span="12"  align="center">
          <el-switch
          v-model="settings.allowLogin"
          on-color="#13ce66"
          off-color="#ff4949"
          @change="handleSwitchAllowLogin">
          </el-switch>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" align="center">
          <span>允许注册</span>
        </el-col>
        <el-col :span="12"  align="center">
          <el-switch
          v-model="settings.allowReg"
          on-color="#13ce66"
          off-color="#ff4949"
          @change="handleSwitchAllowReg">
          </el-switch>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
  import * as api_config from '../../api/config';
  import {Switch, Col, Row} from 'element-ui'
  export default {
    props: {},
    components: {
      'el-switch': Switch,
      'el-col': Col,
      'el-row': Row
    },
    data() {
      return {
        settings: {
          allowReg: true,
          allowLogin: true
        }
      }
    },
    methods: {
      handleSwitchAllowReg(){
        let form = new FormData();
        form.append('isAllow', this.settings.allowReg);
        api_config.switchReg(form).catch(err=>{
          this.$message.error('更新失败：' + err.errmsg);
        })
      },
      handleSwitchAllowLogin(){
        let form = new FormData();
        form.append('isAllow', this.settings.allowReg);
        api_config.switchLogin(form).catch(err=>{
          this.$message.error('更新失败：' + err.errmsg);
        })
      },
      handleUpdateConfigs() {
        api_config.getAll().then(data=>{
          this.settings.allowLogin = data['allowLogin'].boolValue;
          this.settings.allowReg = data['allowReg'].boolValue;
        })
      },
      refresh(){
        this.handleUpdateConfigs();
      }
    },
    created() {

    },
    mounted() {
      this.refresh();
    }
  }
</script>

<style>
  .el-row {
    margin-bottom: 20px;
  }
</style>
